<template>
	<!-- 
	注意
		<up-picker>本项目使用的uview-plus版本为3.4.97,需要更改框架中的inputPropsInner,否者会报警告
	 -->
	<view class="main-box">
		<!-- 注意，
		如果需要兼容微信小程序，最好通过setRules方法设置rules规则
		up-picker-data没有inputProps属性设置输入框样式，需要自己去组件内加
		 -->
		<!-- 表单 -->
		<up-form class="form-box" :model="form" :borderBottom="true" ref="uFormRef"
			labelWidth="auto">
			<up-form-item ref="nameRef" label="客户" prop="customerSeleted" :borderBottom="true"
				required>
				<up-input @click="showPopup('customerSeleted')" v-model="form.customerSeleted"
					readonly placeholder="" border="none" inputAlign="right"
					suffixIcon="arrow-right" />
			</up-form-item>
			<up-form-item label="销售仓库" prop="salesWarehouseSeleted" :borderBottom="true" required>
				<up-input @click="showPopup('salesWarehouseSeleted')"
					v-model="form.salesWarehouseSeleted" readonly placeholder="" border="none"
					inputAlign="right" suffixIcon="arrow-right" />
			</up-form-item>
			<view v-show="fillMoreShow">
				<up-form-item label="送货司机" prop="deliveryDriverSeleted" :borderBottom="true">
					<up-input v-model="form.deliveryDriverSeleted" readonly placeholder=""
						border="none" inputAlign="right" suffixIcon="arrow-right" />
				</up-form-item>
				<up-form-item label="业务员" prop="salespersonSeleted" :borderBottom="true">
					<up-input v-model="form.salespersonSeleted" readonly placeholder=""
						border="none" inputAlign="right" suffixIcon="arrow-right" />
				</up-form-item>
				<up-form-item label="部门" prop="departmentSeleted" :borderBottom="true">
					<up-input v-model="form.departmentSeleted" readonly placeholder="" border="none"
						inputAlign="right" suffixIcon="arrow-right" />
				</up-form-item>
				<up-form-item label="上传附件" prop="attachments" :borderBottom="true">
					<up-input v-model="form.attachments" readonly placeholder="点击上传文件" border="none"
						inputAlign="right" suffixIcon="file-text" />
				</up-form-item>
			</view>
			<view @click="fillMoreShow = !fillMoreShow"
				style="display: flex;justify-content: center;padding: 30rpx 0;">
				<up-icon labelPos="left" :label="fillMoreShow?'收起更多':'展示更多'"
					:name="fillMoreShow?'arrow-up':'arrow-down'" class="right"></up-icon>
			</view>
		</up-form>

		<!-- 在Vue中，可以通过改变key属性来强制重新渲染组件 -->
		<!-- <up-picker :key="picker_cur" keyName="label" valueName="id"
			v-model="pickerSelected[picker_cur]" :show="pickerShow"
			:columns="pickerData[picker_cur]" @confirm="customerConfirm"
			@cancel="pickerShow = false;" @close="pickerShow = false;"
			:closeOnClickOverlay="true"></up-picker> -->

		<!-- 搜索 加商品 -->
		<view class="search-box">
			<up-search @click="toSearchPage()" shape="square" placeholder="首拼/名称/编号/条码"
				:clearabled="true" :showAction="false" height="64rpx" disabled></up-search>
			<up-button
				:customStyle="{width:'120rpx',height:'64rpx',marginLeft:'10rpx',color:'#3c9cff'}"
				color="#ebf3fe" text="扫码"></up-button>
			<up-button @click="toProductPage"
				:customStyle="{width:'120rpx',height:'64rpx',marginLeft:'10rpx',color:'#3c9cff'}"
				color="#ebf3fe" text="加商品"></up-button>
		</view>

		<view>
			<view class="header"
				style="font-size: 28rpx;font-weight: 300;background-color: #e3e8fb;padding: 20rpx;display: flex;width: 100%;">
				<view style="flex:1">商品</view>
				<view style="width:140rpx">销售价</view>
				<view style="width:180rpx">数量/小计</view>
			</view>
			<view class="body">
				<view class="row" style="background-color: #ffffff;" v-for="(item,index) in 10">
					<view style="display: flex;padding: 20rpx 20rpx 0 20rpx;width: 100%;">
						<view style="flex:1">
							<view style="font-size: 24rpx;">
								<text
									style="color: #3c9cff;padding: 4rpx 16rpx;background-color: #edf0f9;">1</text>
								<text
									style="font-weight: bold;font-size: 30rpx;margin-left: 10rpx;">哇哈哈</text>
							</view>
							<view style="font-size: 24rpx;padding: 6rpx 0;">
								<text>3箱1瓶</text>
								<text style="margin-left: 10rpx;">1箱=12瓶</text>
							</view>
						</view>
						<view style="width:140rpx">25</view>
						<view style="width:180rpx">
							<view style="font-weight: bold;font-size: 30rpx;">
								2箱
							</view>
							<view style="font-size: 24rpx;font-weight: bold;color: #3c9cff;">
								￥520.00
							</view>
						</view>
					</view>
					<view style="display: flex;padding: 20rpx;" v-show="index==1">
						<button
							style="display: flex;align-items: center; border-radius: 50rpx;padding: 0 20rpx;margin-left: 0;background-color: #f3f2f7;"
							size="mini">
							<text>￥260/箱</text>
							<up-icon name="arrow-down-fill" style="margin-left: 20rpx;"></up-icon>
						</button>
						<up-number-box buttonSize="25" buttonWidth="25"></up-number-box>
					</view>
				</view>
				<!-- <up-empty mode="data" icon="data"></up-empty> -->
			</view>
		</view>




		<!-- 弹出层 -->
		<up-popup :show="popupShow" :round="10" mode="bottom" @close="popupClose"
			:safeAreaInsetTop="true">
			<view style="display: flex;align-items: center;padding: 20rpx;">
				<up-search v-model="cusKeyword" shape="square" placeholder="首拼/名称/编号/条码"
					:clearabled="true" :showAction="false" searchIconColor="#4e77cf"
					height="64rpx"></up-search>
				<up-button @click="searchCus"
					:customStyle="{width:'120rpx',height:'64rpx',marginLeft:'10rpx',color:'#3c9cff'}"
					color="#ebf3fe" text="搜索"></up-button>
				<up-button @click="resetSearch"
					:customStyle="{width:'120rpx',height:'64rpx',marginLeft:'10rpx',color:'#3c9cff'}"
					color="#ebf3fe" text="重置"></up-button>
			</view>

			<up-list @scrolltolower="scrolltolower" :height="app.globalData.MAIN_VIEW_HEIGHT-50">
				<up-list-item v-for="(item, index) in indexList" :key="index"
					style="padding: 20rpx;border-bottom: 1px solid #dcdfe6;">
					<view style="font-weight: bold;display: flex;justify-content: space-between;">
						<text>{{item.cusname}}</text>
						<text>{{item.telephone}}</text>
					</view>
					<view
						style="margin-top: 10rpx;display: flex;justify-content: space-between;color:#75747c">
						<text>{{item.region}}</text>
						<text>{{item.region}}</text>
					</view>
				</up-list-item>
			</up-list>
		</up-popup>

		<view class="bottom-box">
			<view style="display: flex;padding: 20rpx 20rpx 0 20rpx;">
				<view style="display: flex;align-items: center;">
					<text>整单优惠</text>
					<up-input :customStyle="{height:'30rpx',width:'120rpx',marginLeft:'10rpx'}"
						placeholder="" border="surround" type="number"></up-input>
				</view>
				<view style="margin-left: auto;">
					<text>合计：</text>
					<text style="font-size: 48rpx;color:#C06E5D;font-weight: bold;">￥520.00</text>
				</view>
			</view>
			<view style="padding: 20rpx;">
				<up-button type="primary" @click="submitForm">提交</up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, watch } from 'vue'
	import { onReady, onLoad } from "@dcloudio/uni-app"
	const app = getApp()
	const cellStyleFunc = (scope) => {
		// console.log(scope)
		// if (scope.column.key == 'product' && scope.row.id == '1') {
		// 	// return {
		// 	// 	background: 'blue',
		// 	// 	color: 'yellow'
		// 	// }
		// } else {
		// 	return {}
		// }
	}
	onLoad(async () => {

	})

	// 车销订单表单数据
	const form = ref({
		// 客户
		customerSeleted: null,

		// 销售仓库
		salesWarehouseSeleted: null,

		// 送货司机
		deliveryDriverSeleted: null,

		// 业务员
		salespersonSeleted: null, // 不填写默认为当前登录人

		// 部门
		departmentSeleted: null, // 不填写默认为当前登录人部门

		// 上传附件
		attachments: "",

		// 商品列表
		products: [],

		// 整单优惠金额
		discountAmount: '',

		// 合计金额
		totalAmount: 0.00
	})
	const fillMoreShow = ref(false);
	const popupShow = ref(false);
	const limitPage = ref({
		pageNum: 1,
		pageSize: 10,
	})
	const cusKeyword = ref("")
	// showPopup数据
	const indexList = ref([]);
	const showPopup = async (type) => {
		popupShow.value = true
		if (type === "customerSeleted") {
			//loadmore();
			uni.navigateTo({
				url:'/pages/selectCus'
			})
		} else if (type === "salesWarehouseSeleted") {

		}
	}
	// 点击遮罩层的时候会调用
	const popupClose = async (type) => {
		// 关闭popup
		popupShow.value = false
		// 重置所有popup数据
		indexList.value = []
		limitPage.value.pageNum = 1
		cusKeyword.value = ""
	}

	// 分页搜索客户
	const searchCus = () => {
		indexList.value = []
		limitPage.value.pageNum = 1
		loadmore();
	};
	// 重置搜索
	const resetSearch = (callback) => {
		indexList.value = []
		limitPage.value.pageNum = 1
		cusKeyword.value = ""
		loadmore();
	}

	// 滚动加载
	const scrolltolower = () => {
		loadmore();
	};

	const loadmore = async (baseUrl) => {
		// 直接 params = limitPage.value再去修改params会改变ref的limitPage
		const params = { ...limitPage.value }
		if (cusKeyword.value.trim() !== "") {
			params.cusname = cusKeyword.value
		}
		const url = app.globalData.buildUrl("/wms/customer/list", params)
		const res = await app.globalData.http.get(url)
		indexList.value.push(...res.rows);
		limitPage.value.pageNum++;
	};
	const toSearchPage = (index) => {
		uni.navigateTo({
			url: '/pages/searchPage'
		})
	}

	// 校验规则  
	/* {
			required: true,
			type: 'array',
			len: 1,
			message: '请输入手机号',
			trigger: ['change', 'blur'],
		},*/
	const rules = ref({
		customerSeleted: [{
			required: true,
			type: 'number',
			message: '请选择客户',
			trigger: ['change', 'blur'],
		}],
		salesWarehouseSeleted: [{
			required: true,
			type: 'number',
			message: '请选择仓库',
			trigger: ['change', 'blur'],
		}]
	})


	// 表单引用  
	const uFormRef = ref(null);

	// 页面生命周期
	onReady(() => {
		// 如果需要兼容微信小程序，最好通过setRules方法设置rules规则
		uFormRef.value.setRules(rules.value)
	})


	const toProductPage = () => {
		uni.navigateTo({
			url: `/pages/addProduct`
		})
	}
	// 提交方法  
	const submitForm = () => {
		//console.log(form.value)
		uFormRef.value.validate().then(valid => {
			if (valid) {
				uni.$u.toast('校验通过')
			} else {
				uni.$u.toast('校验失败')
			}
		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('校验失败')
		});
	}
</script>

<style lang="scss" scoped>
	.form-box {
		padding: 0 20rpx;
		background-color: #ffffff;
	}

	.search-box {
		display: flex;
		margin: 20rpx 0;
		padding: 20rpx;
		background-color: #ffffff;
	}

	.bottom-box {
		background-color: #ffffff;
		// height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 998;
		box-sizing: content-box;
		border-top: 1px solid #dedede;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>